import { useEffect, useRef, useState } from 'react'

const Son = () => {
  // 定义count变量
  const [count, setCount] = useState(0)
  let timerId = useRef(0)

  useEffect(() => {
    // 组件挂载，开启了一个定时器
    timerId.current = setInterval(() => {
      console.log('interval')
    }, 1000)
    console.log('组件挂载存储的定时器ID：', timerId.current)
  }, [])

  // 清理定时器
  const clear = () => {
    console.log('清理定时器：', timerId.current)
    clearInterval(timerId.current)
  }

  // 修改count变量
  const handleClick = () => {
    setCount(count + 1)
  }

  return (
    <div>
      <button onClick={handleClick}>+1</button>
      <button onClick={clear}>清理定时器</button>
      <h1>计数器：{count}</h1>
    </div>
  )
}

export default Son
